<template>
    <div>
        <h3>商品详情</h3>
        <el-row>
            <el-col :span="8"></el-col>
            <el-col
            :key="o"
            :span="8"
            >
            <el-card :body-style="{ padding: '0px' }" class="item">

                <div class="item-title">{{item.title}}</div>
                <div class="seckill seckill-time" v-if="item.promoStatus == PROMO_STATUS.PREPARE">
                    <div>秒杀活动开始时间:</div>
                    <div>{{item.startDate}}</div>
                    <div>倒计时:{{timer.delta}}s</div>
                </div>
                <div class="seckill seckill-time" v-if="item.promoStatus == PROMO_STATUS.UNDERWAY">
                    <div>秒杀活动正在进行</div>
                </div>

                <img :src="item.imgUrl" class="item-image"/>
                
                <div>
                    <span v-if="item.promoStatus != PROMO_STATUS.PREPARE && item.promoStatus != PROMO_STATUS.UNDERWAY"><span>售价</span>{{item.price}}</span>
                    <span v-if="item.promoStatus == PROMO_STATUS.PREPARE || item.promoStatus == PROMO_STATUS.UNDERWAY"><del><span>售价</span>{{item.price}}</del></span>
                    <span class="seckill" v-if="item.promoStatus == PROMO_STATUS.PREPARE || item.promoStatus == PROMO_STATUS.UNDERWAY">秒杀价</span> <span class="seckill">{{item.promoPrice}}</span>
                </div>
                <div>
                    <span>销量</span>{{item.sales}}
                    <span>库存</span>{{item.stock}}
                </div>
                <div class="item-description">
                    <span>商品描述</span><br>
                    {{item.description}}
                </div>

                <div class="item-button">
                    <el-button type="primary" @click="createOrder()" :disabled="item.promoStatus==PROMO_STATUS.PREPARE">下单</el-button>
                    <el-button type="danger" @click="comeback()">返回</el-button>
                </div>
            </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 秒杀活动状态常量
            PROMO_STATUS: {
                NOTHING: 0,     //无活动
                PREPARE: 1,     //准备开始
                UNDERWAY: 2,    //正在进行
                END: 3,         //已结束
            },
            item: {
                id: 0,
                title: '',
                price: '0',
                description: '',
                stock: '0',
                imgUrl: '',
                sales: '0',
                promoStatus: 0,
                promoId: 0,
                promoPrice: 0,
                startDate: "",
            },
            order: {
                itemId: null,
                amount: 1,
                promoId: null,
            },
            timer: {
                startTime: 0,
                nowTime: 0,
                delta: 0,
            },
            flush_timer: null,
        }
    },
    mounted: function() {
        this.$http({
                method: 'GET',
                url:this.$backend+ "/item/get?id="+this.$route.params.id,  
                withCredentials: true,
            })
            .then((result) => {
                if (result.data.status == "success") {
                    this.item = result.data.data
                    //console.log(this.item)
                    if(this.item.promoStatus == this.PROMO_STATUS.PREPARE){
                        var startTime = this.item.startDate.replace(new RegExp("-","gm"), "/");
                        this.timer.startTime = (new Date(startTime)).getTime();
                        this.timer.nowTime = Date.parse(new Date());
                        this.timer.delta = ( this.timer.startTime -  this.timer.nowTime) / 1000;
                    }

                    this.reload();
                } else {
                    console.log(this.$router.params);
                    alert("获取失败,"+ result.data.data.errMsg);
                }
            }).catch((err) => {
                console.log(err)
                alert("发送信息超时, 请稍后再试");
                return false;
            });
            

            
    },
    
    methods: {
        comeback() {
            clearInterval()
            this.$router.push("/source/item/list");
        },
        createOrder(){
            this.order.itemId = this.item.id;
            this.order.promoId = this.item.promoId;
            this.$http({
                method: 'POST',
                url:this.$backend+ "/order/create",
                data: this.order,  
                withCredentials: true,
            })
            .then((result) => {
                if (result.data.status == "success") {
                    alert("下单成功")
                    this.$router.go(0);
                } else {
                    alert("下单失败,"+ result.data.data.errMsg);
                    console.log(result)
                    if(result.data.data.errCode == 20003) {
                        this.$router.push("/");
                    }
                }
            }).catch((err) => {
                console.log(err)
                alert("发送信息超时, 请稍后再试");
                return false;
            });
        },
        reload() {
            if(this.item.promoStatus == this.PROMO_STATUS.PREPARE) {
                var _this = this
                this.flush_timer = setInterval(function(){
                    _this.$http({
                        method: 'GET',
                        url:this.$backend+ "/item/get?id="+_this.$route.params.id,  
                        withCredentials: true,
                    })
                    .then((result) => {
                        if (result.data.status == "success") {
                            _this.item = result.data.data
                            var startTime = _this.item.startDate.replace(new RegExp("-","gm"), "/");
                            _this.timer.startTime = (new Date(startTime)).getTime();
                            _this.timer.nowTime = Date.parse(new Date());
                            _this.timer.delta = ( _this.timer.startTime -  _this.timer.nowTime) / 1000;
                        } else {
                            console.log(_this.$router.params);
                            alert("获取失败,"+ result.data.data.errMsg);
                        }
                    }).catch((err) => {
                        console.log(err)
                        alert("发送信息超时, 请稍后再试");
                        return false;
                    });
                }, 1000)
            }
        }
    },
    beforeRouteLeave (to, from, next) {
        // ...
        clearInterval(this.flush_timer);
        this.flush_timer = null;
        next() //必须加next(), 转到下一个组件
    }
}

</script>

<style>
.item {
    padding-bottom: 10px;
}
.item-title {
    margin: 2% 0 0 5%;
    text-align: left;
    font-weight: bold;
}
.item-image {
    width: 300px;
}
.item-button {
    margin-top: 1%;
    margin-left: 75%;
}
.seckill {
    color: red;
}
.seckill-time {
    margin: 0 0 0 3%;
    text-align: left;
    
}
</style>